Don't Let Your Stylesheets Give You Lip. Fight Back with Sass!

Andy Matthews

@commadelimited

andyMatthews.net

Adobe
Packt
Nettuts

Emma, Inc.

What is Sass?

Superset of CSS

Preprocessor

Sass isn't?

Sass != Less

$ vs @

Sass != Stylus

{} : ;

Stylus <3 Coffeescript

Sass != Compass

Sass is to ________ as JavaScript is to __________

Sass is to Compass as JavaScript is to Underscore

What does Sass look like?

Sass vs Scss

/* Sass */
.alert
    color: red

/* Scss */
.alert {
    color: red;
}

How do you install Sass?

Free vs paid

gem install sass
sass -v
profit(?)

But what about the paid options?

Tell me about nesting!

p {
  color: #C6538C;
  span {
    font-variant: small-caps;
  }
}

p {
  color: #C6538C;
}
p span {
  font-variant: small-caps;
}

nav {
  height: 40px;
  >a {
    text-decoration: none;
  }
}

nav {
  height: 40px;
}
nav > a {
  text-decoration: none;
}

.avatar {
  background: #ffffff;
  .twitter {
    background: #669999;
  }
}

.avatar {
  background: #ffffff;
}
.avatar .twitter {
  background: #669999;
}

.avatar {
  background: #ffffff;
  &.active {
    background: #669999;
  }
}

.avatar {
  background: #ffffff;
}
.avatar.active {
  background: #669999;
}

Enough about nesting, how about variables?

numbers strings colors booleans nulls lists maps

numbers

2.4, 8, 42px

strings

"red", 'red', red

colors

color, hex, rgb(a)

booleans

true, false

lists

1em 2em 0 1em

maps

(k1: v1, k2: v2)

$background: #04a3f9;
body {
    background: $background;
}

body {
  background: #04a3f9;
}

$env: 'dev';
body-#{$env} {
    background: url('grid.png');
}

body-dev {
  background: url("grid.png");
}

And how about functions?

@function percent-width($target, $parent) {
  @return ($target / $parent) * 100%;
}

.my-module {
  width: percent-width(650px, 1000px);
}

.my-module {
  width: 65%;
}

built-ins

http://goo.gl/TgNlBT

Or mixins?

@mixin header-font {
  font: {
    family: Arial;
  }
  color: purple;
}

h1 {
  @include header-font;
}

h1 {
  font-family: Arial;
  color: purple;
}

Beware nested mixins

Can I use conditional statements ?

Yes

@mixin debugging {
  background: url('grid.png');
  border: 1px solid #000000;
}

$debug: true;
body {
  @if $debug == true {
    @include debugging;
  }
}

body {
  background: url("grid.png");
  border: 1px solid #000000;
}

Or loops?

Yes

@for

$columns: 4;
@for $i from 1 through $columns {
  .grid-#{$i} {
    width: 60px * $i;
  }
}

.grid-1 { width: 60px; }
.grid-2 { width: 120px; }
.grid-3 { width: 180px; }
.grid-4 { width: 240px; }

@each

$icons: good bad;
@each $icon in $icons {
  .icon-#{$icon} {
    background: url('#{$icon}.png');
  }
}

.icon-good { background: url("good.png"); }
.icon-bad { background: url("bad.png"); }

@while

$i: 1;
$width: 60px;
@while $i < 13 {
  .grid-#{$i} { width: $width; }
  $width: $width + 80px;
  $i: $i + 1;
}

.grid-1 { width: 60px; }
.grid-2 { width: 140px; }
...
.grid-12 { width: 940px; }

Can I comment in Sass?

Sure can

// A wild comment appears
a { border: 1px solid red; }

a {
  border: 1px solid red;
}

/* I could write a book
in this comment */
p { margin: 10px; }

/* I could write a book
in this comment */
p {
  margin: 10px;
}

Does Sass have partials?

_icons.scss

$icons: good bad;
@each $icon in $icons {
  .icon-#{$icon} {
    background: url('#{$icon}.png');
  }
}

main.scss

@import 'icons'

Do I have to write all my own Sass?

Nope

Compass and Bourbon and Gumby

That's great and all but..

Compiling

$ sass source.scss > final.css

Codekit LiveReload Grunt

package.json

Gruntfile.js

• Sass
• Bourbon
• Gumby
• Compass
• Grunt
• CodeKit

Questions